<template>
  <div v-show="open" ref="dial-plate" class="dial-plate">
    <table class="dial-table" cellspacing="15px">
      <tr valign="middle">
        <td colspan="4">
          <el-input ref="phoneNumber" v-model="phoneNumber" readonly></el-input>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('1')">1</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('2')">2</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('3')">3</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickDelete('←')">←</el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('4')">4</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('5')">5</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('6')">6</el-button>
        </td>
        <td rowspan="3">
          <el-button type="info" @click="handleCommit">
            <font style="font-size: 25px">加入会议</font>
          </el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('7')">7</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('8')">8</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('9')">9</el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('*')">*</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('0')">0</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('#')">#</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import Webrtc2Sip from '@/utils/Webrtc2Sip'
import { mapGetters } from 'vuex'
export default {
  props: {
    open: Boolean,
    meeting: Object,
  },
  computed: {
    ...mapGetters(['operatorCallTels']),
  },
  data() {
    return {
      phoneNumber: '',
      number: '',
      loading: false,
    }
  },
  methods: {
    // 点击删除
    clickDelete() {
      this.phoneNumber = this.phoneNumber.substr(0, this.phoneNumber.length - 1)
      this.$refs.phoneNumber.focus()
    },
    // 点击拨号盘
    clickNumber(number) {
      this.number = number
      this.phoneNumber += number
      this.$refs.phoneNumber.focus()
    },
    // 加入会议
    handleCommit() {
      if (this.loading) return
      if (this.phoneNumber) {
        // 添加主叫号码
        var calling = sessionStorage.getItem(
          'meetingCalling-' + this.meeting.meetID
        )
        if (!calling) {
          if (!this.operatorCallTels)
            return this.$message({
              message: '操作员号码不可达',
              type: 'error',
              showClose: true,
              duration: 3 * 1000,
            })
          calling = this.operatorCallTels.includes(this.phoneNumber)
            ? this.phoneNumber
            : this.operatorCallTels[0]
          sessionStorage.setItem(
            'meetingCalling-' + this.meeting.meetID,
            calling
          )
        }
        SDK.getMeetingMember(this.meeting.meetID).then((res) => {
          const members = res.meet_list
          for (const mem of members) {
            if (
              mem.activeDevice === this.phoneNumber &&
              calling != 'mem.activeDevice'
            ) {
              this.$message({
                message: '已在会议中',
                type: 'error',
                showClose: true,
                duration: 3 * 1000,
              })
              return
            }
          }
          var calledDevices = []
          if (!this.operatorCallTels.includes(this.phoneNumber)) {
            calledDevices.push(this.phoneNumber)
          }
          // 设置webrtc监听事件
          if (Webrtc2Sip.isEnabled())
            this.$emit('setWebrtcCostumEvent', calling)
          if (calling && calledDevices.length === 0) {
            this.$message({
              message: '主被叫号码相同',
              type: 'error',
              showClose: true,
              duration: 3 * 1000,
            })
            return
          }
          this.loading = true
          SDK.meetingCall(this.meeting.meetID, calledDevices, calling)
            .then((res) => {
              this.loading = false
              this.handleClose()
            })
            .catch((err) => {
              this.loading = false
              console.log(err)
            })
          this.$store.commit('callFlagEvent', true) // vuex缓存
        })
      }
    },
    // 关闭
    handleClose() {
      this.$emit('update:open', false)
    },
    // 点击外部事件
    clickEvent(e) {
      var box = this.$refs['dial-plate']
      if (box && !box.contains(e.target)) {
        this.handleClose()
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.phoneNumber.focus()
      document.addEventListener('click', this.clickEvent, true)
    })
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/dial.scss';
</style>
